<template>
	<view class="follow">
		<navBar title="我的关注"></navBar>
		<view class="myFollow" >
			<view class="my" v-for="item in followList" :key="item.id">
				<view class="followImg">
					<image :src="item.user.avatar"></image>
				</view>
				<view class="followTxt">
					<view class="name">
						{{item.user.name}}
					</view>
					<view class="itc">
						{{item.user.desc}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import {
		getFollow
	} from '@/config/api.js'
	
	export default {
		data() {
			return {
				followList:[]
			};
		},
		async onLoad() {
			const follow=await getFollow(this.userInfo.token)
			this.followList=follow.data.rows
			console.log(this.followList);
		},
		computed:{
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss">
	.follow {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 4vw;
		background-color: #eee;
		.myFollow {
			padding: 3vw;
			font-size: 10px;
			box-sizing: border-box;
			width: 100%;
			background-color: #fff;
			border-radius: 3vw;
			display: flex;
			flex-direction: column;
			.my {
				    padding: 1vw 0;
				height: 15vw;
				border-bottom: 0.5vw #eee solid;
				display: flex;
				.followImg {
					height: 12vw;
					width: 12vw;
					background-color: #ffff7f;
					border-radius: 50%;
					overflow: hidden;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.followTxt{
					height: 100%;
					margin-left: 3.5vw;
					.name{
						font-size: 16px;
					}
					.itc{
						font-size: 15px;
						color: #818181;
						}
				}
			}
		}
	}
</style>
